<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浏览器原理-页面的渲染过程(Browser principle - page rendering process)</title>
  <!-- 
  在JavaScript和前端开发中，理解浏览器的工作原理和页面渲染过程是非常重要的。
  一、页面渲染过程概述
  1. 用户输入：
    - 用户在浏览器中输入URL或点击链接，浏览器发出HTTP请求获取网页资源。
  2. HTTP请求和响应：
    - 浏览器通过HTTP协议向服务器发送请求，服务器处理请求后返回HTML文档及相关资源（如CSS、JavaScript、图片等）。

  二、解析和构建
  1. HTML解析：
    - 浏览器接收到HTML文档后，开始解析HTML代码，构建DOM（文档对象模型）树。每个HTML元素对应一个DOM节点。
  2. CSS解析：
    - 同时，浏览器解析CSS样式表，构建CSSOM（CSS对象模型）树。CSSOM树表示了页面的样式信息。
  3. JavaScript执行：
    - 浏览器在解析HTML时遇到 `<script>` 标签时，会执行其中的JavaScript代码。JavaScript可以操作DOM和CSSOM，可能会影响页面的结构和样式。

  三、渲染树的构建
  - 渲染树：
    - 浏览器根据DOM树和CSSOM树构建渲染树（Render Tree）。渲染树只包含可见的节点，并包含每个节点的样式信息。
    - 渲染树的构建会忽略掉那些在CSS中设置为 `display: none` 的元素。

  四、布局（Reflow）
  - 布局计算：
    - 浏览器根据渲染树计算每个节点的几何信息，包括位置和大小。这个过程称为布局（或重排，Reflow）。
    - 布局过程是一个复杂的计算过程，涉及到所有可见元素的位置和尺寸。

  五、绘制（Painting）
  - 绘制阶段：
    - 一旦布局完成，浏览器开始绘制每个节点，将其内容绘制到屏幕上。这个过程称为绘制（Painting）。
    - 在这一阶段，浏览器会将渲染树中的每个节点转换为屏幕上的像素。

  六、合成（Compositing）
  - 合成阶段：
    - 对于一些复杂的页面，浏览器可能会将页面分成多个层（Layer），并在合成阶段将这些层合并为最终的图像。
    - 这有助于提高性能，特别是在处理动画和过渡效果时。

  总结
  - 浏览器的页面渲染过程包括用户输入、HTTP请求与响应、HTML解析、CSS解析、JavaScript执行、渲染树构建、布局、绘制和合成等多个步骤。
  - 理解这一过程有助于前端开发者优化网页性能，提高用户体验，特别是在处理复杂的DOM操作和样式时。
   -->
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>

  <div class="box">浏览器原理-页面的渲染过程(Browser principle - page rendering process)</div>
  <p>在JavaScript和前端开发中，理解浏览器的工作原理和页面渲染过程是非常重要的。</p>

  <script src="./js/test.js"></script>
  <button>修改box</button>

  <script>
    const boxEl = document.querySelector('.box')
    const btnEl = document.querySelector('button')
    btnEl.onclick = function () {
      boxEl.style.height = '200px'
    }

    function sum(num1, num2) {
      return num1 + num2
    }

    sum(20, 30)
    sum(20, 30)
    sum(20, 30)
    sum(20, 30)
    sum("abc", "cba")

  </script>
  
</body>
</html>